/*!
 * PixelBox
 * http://widcraft.blogspot.com/
 *
 * Originally Created By Hardeep Asrani
 *
 * My Twitter : http://www.twitter.com/hardeepasrani
 * Lincenced under CC 3.5
 *
 * Date: Thu Sep 15 2012
 */

jQuery(document).ready(function($) {
	
	$('.pixelbox_trigger').click(function(e) {
		
		//prevent default action (hyperlink)
		e.preventDefault();
		
		//Get clicked link href
		var image_href = $(this).attr("href");
		var image_width = $(this).attr("width");
		var image_height = $(this).attr("height");
		
		/* 	
		If the pixelbox window HTML already exists in document, 
		change the img src to to match the href of whatever link was clicked
		
		If the pixelbox window HTML doesn't exists, create it and insert it.
		(This will only happen the first time around)
		*/
		
		if ($('#pixelbox').length > 0) { // #pixelbox exists
			
			//place href as img src value
			$('#content').html('<img src="' + image_href + '"  width="' + image_width + '"  height="' + image_height + '" />');
		   	
			//show pixelbox window - you could use .show('fast') for a transition
			$('#pixelbox').fadeIn(300);
		}
		
		else { //#pixelbox does not exist - create and insert (runs 1st time only)
			
			//create HTML markup for pixelbox window
			var pixelbox = 
			'<div id="pixelbox">' +
				'<img src="Images/close.png" id="close"/>' +
				'<div id="content">' + //insert clicked link's href into img src
					'<img src="' + image_href + '"  width="' + image_width + '"  height="' + image_height + '" />' +
				'</div>' +	
			'</div>';
				
			//insert pixelbox HTML into page
			$('body').append(pixelbox);
		}
		
	});
	
	//Click anywhere on the page to get rid of pixelbox window
	$('#close').live('click', function() { //must use live, as the pixelbox element is inserted into the DOM
		$('#pixelbox').fadeOut(300);
	});

});
